// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    width: 400
    height: 180
    color:"#5775a5";
    border.color: "black"
    border.width: 1;

    property variant isPlay: true;

    Rectangle{
        id:logo;
        width:60;
        height:60;
        color:"#5775a5";
        anchors.left: parent.left
        anchors.leftMargin: 5;
        anchors.top: parent.top;
        anchors.topMargin: 5;
        Image{
            source:"Assets/Radio/pandora_icon.png"
        }


    }
    Rectangle{
        id:trackinfo
        height: 60
        width: 300;
        color: "#5775a5"
        anchors.left: logo.right
        anchors.leftMargin: 10;
        anchors.top: logo.top;

        Text{
            height: 20;
            id:songTitle;
            text:"Title: ";
            font.pointSize: 12;
            anchors.top: trackinfo.top;
            //anchors.right: album.right;
            anchors.left: parent.left;

        }
        Text{
            height: 20;
            id:artist;
            anchors.top: songTitle.bottom;
            anchors.left: parent.left;
            //anchors.right: album.right;
            text:"Artist: ";
            font.pointSize: 12;
        }
        Text{
            height: 20;
            id:album;
            text:"Album: ";
            anchors.top: artist.bottom;
            anchors.left: trackinfo.left;
            font.pointSize: 12;
        }

        ListView{
            anchors.top: songTitle.top;
            anchors.left: songTitle.right;
            anchors.leftMargin: 2;
            model:xmlModel;
            delegate: Text{
                text:song
                font.pointSize: 12;

            }
        }
        ListView{
            anchors.top: artist.top;
            anchors.left: artist.right;
            anchors.leftMargin: 2;
            model:xmlModel;
            delegate: Text{
                text:artist
                font.pointSize: 12;

            }
        }
        ListView{
            anchors.top: album.top;
            anchors.left: album.right;
            anchors.leftMargin: 2;
            model:xmlModel;
            delegate: Text{
                text:album
                font.pointSize: 12;

            }
        }


    }

    Rectangle{
        id:inputBar;
        width: 300;
        height: 40;
        border.color: "black";
        border.width: 1;
        x: 50;
        y: 85;
        color:"lightblue";
        //anchors.centerIn: parent;

        TextInput{
            y:8;
            id:userInput
            text:"Enter Artist or Song";
            anchors.left: parent.left;
            anchors.leftMargin: 5;
            font.pointSize: 12;
        }
    }
    Rectangle{
        id:controlButtons;
        width:300;
        height:50;
        color:"#5775a5";
        anchors.left: inputBar.left;
        anchors.top: inputBar.bottom;
        anchors.topMargin: 2;

        Image{
            id:playPause;
            source:"Assets/Radio/btn_play.png"
            anchors.centerIn: parent;
            anchors.margins: 5;
            MouseArea{
                anchors.fill: parent;
                onClicked: setPlayPause();
            }

        }

        Image{
            id:skip;
            source:"Assets/Radio/btn_skip.png";
            anchors.left: playPause.right
            anchors.leftMargin: 5;
            anchors.top: parent.top;
            anchors.topMargin: 7;
            MouseArea{
                anchors.fill: parent;
                onClicked: setSource("KatyPerry");
            }


        }

        Image{
            id:thumbUp;
            source:"Assets/Radio/btn_up.png";
            anchors.right: playPause.left;
            anchors.rightMargin: 5;
            anchors.top: parent.top;
            anchors.topMargin: 7;
            MouseArea{
                anchors.fill: parent;
                onClicked: setThumb("thumbUp");
            }
        }

        Image{
            id:thumbDown;
            source:"Assets/Radio/btn_down.png";
            anchors.right: thumbUp.left;
            anchors.rightMargin: 5;
            anchors.top: parent.top;
            anchors.topMargin: 7;
            MouseArea{
                anchors.fill: parent;
                onClicked: setThumb("thumbDown");
            }
        }


    }

    Text{
        id:title;
        text:"Radio Station Here";
        anchors.bottom: inputBar.top;
        anchors.bottomMargin: 2;
        anchors.left: inputBar.left;

    }
/*
    Rectangle{
        width:parent.width;
        height:25;
        color:"#5775a5";
        border.color: "black";
        border.width: 1;
        anchors.bottom: parent.bottom;

        Text{
            id:signIn;
            text: "Click here to sign in";
            anchors.centerIn: parent;
        }

        MouseArea{
            anchors.fill: parent;
            onClicked: signInRect.visible = true, signInRectPass.visible = true,okButton.visible = true;
        }


    }

    Rectangle{
        id:signInRect
        width:150;
        height:30;
        color:"silver";
        border.color: "black";
        border.width: 1;
        anchors.centerIn: parent;
        visible: false;
        TextInput{
            id:signInInput;
            text:"Enter email here";
            anchors.centerIn: parent;
        }
    }
    Rectangle{
        id:signInRectPass;
        width: 150;
        height: 30;
        color:"silver";
        border.color: "black";
        border.width: 1;
        anchors.top: signInRect.bottom;
        anchors.topMargin: 2;
        anchors.left: signInRect.left;
        visible: false;
        TextInput{
            id:signInInputPass;
            text:"Enter password here";
            anchors.centerIn: parent;
        }
    }
    Rectangle{
        id:okButton;
        x:165;
        width:70;
        height:30;
        color:"limegreen";
        border.color: "black";
        border.width: 1;
        anchors.top: signInRectPass.bottom;
        anchors.topMargin: 2;
        visible:false;
        Text{
            text:"OK";
            anchors.centerIn: parent;
        }
        MouseArea{
            anchors.fill: parent;
            onClicked: signInRect.visible = false, signInRectPass.visible = false,okButton.visible = false;
        }
    }
*/
    Rectangle{
        id:enterButton;
        width:40;
        height:40;
        color:"#5775a5";
        anchors.left:inputBar.right;
        anchors.leftMargin: 2;
        anchors.top: inputBar.top;
        Image{
            source:"Assets/Radio/add.png"
        }

        MouseArea{
            anchors.fill: parent;
            onClicked: setSource(userInput.text);
        }
    }

    XmlListModel {
         id: xmlModel
         source: ""
         query: "/pandora/playlist"


         XmlRole { name: "song"; query: "song/string()" }
         XmlRole { name: "artist"; query: "artist/string()" }
         XmlRole { name: "album"; query: "album/string()" }
     }

    function setSource(title){
        xmlModel.source = "Assets/Radio/"+ title + ".xml";
        playPause.source="Assets/Radio/btn_pause.png"
        isPlay = false;
        thumbUp.source ="Assets/Radio/btn_up.png"
    thumbDown.source="Assets/Radio/btn_down.png";
    }
    function setPlayPause(){
        if(isPlay){
            playPause.source="Assets/Radio/btn_pause.png"
            isPlay = false;
        }
        else{
            playPause.source="Assets/Radio/btn_play.png"
            isPlay = true;
        }
    }
    function setThumb(id){
        console.log(id);
        if(id==="thumbUp"){
            thumbUp.source ="Assets/Radio/btn_up_indicator.png"
        thumbDown.source="Assets/Radio/btn_down.png";
        }
        else{
            thumbUp.source ="Assets/Radio/btn_up.png"
        thumbDown.source="Assets/Radio/btn_down_indicator.png";
        }


    }
 }
//Dan
